import Indicator from "@/base_ui/indicator"
import PropTypes from "prop-types"
import React, { memo, useState } from "react"
import { DemoWrapper } from "./style"

const Demo = memo((props) => {
  const names = [
    "abc",
    "ccc",
    "wbb",
    "cxc",
    "bdb",
    "cwc",
    "bbfb",
    "ccxc",
    "bbsb",
  ]
  const [selectIndex, setSelectIndex] = useState(0)
  function clickHandle(isnext) {
    let newIndex = isnext ? selectIndex + 1 : selectIndex - 1
    if(newIndex < 0) newIndex = names.length - 1
    if(newIndex > names.length - 1) newIndex = 0
    setSelectIndex(newIndex)
    
  }
  return (
    <DemoWrapper>
      <div className="control">
        <button onClick={e => clickHandle(false)}>上一个</button>
        <button onClick={e => clickHandle(true)}>下一个</button>
      </div>
      <div className="content-list">
        <Indicator selectIndex={selectIndex}>
          {names.map((item, index) => {
            return <button key={index}>{item}</button>
          })}
        </Indicator>
      </div>
    </DemoWrapper>
  )
})

Demo.propTypes = {}

export default Demo
